<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="fontico/iconfont.css" />
		<link rel="stylesheet" href="css/header.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {
				plus.navigator.setStatusBarStyle("light");
				plus.navigator.setStatusBarBackground("#C9394A")

			});
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title">
			<h1 class="mui-title title-color"><b>零式</b></h1>
		</header>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" tabindex="0">
				<span class="mui-icon iconfont icon-fire"></span>
				<span class="mui-tab-label">零式</span>
			</a>
			<a class="mui-tab-item" tabindex="1">
				<span class="mui-icon iconfont icon-tongxunlu"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" tabindex="2">
				<span class="mui-icon iconfont icon-zhinanzhen1"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" tabindex="3">
				<span class="mui-icon iconfont icon-wode-active"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
		<script type="text/javascript">
			var zeroArray = [{
					pageId: "zero-chatlist.html",
					pageUrl: "zero-chatlist.html"
				},
				{
					pageId: "zero-contact.html",
					pageUrl: "zero-contact.html"
				},
				{
					pageId: "zero-discover.html",
					pageUrl: "zero-discover.html"
				},
				{
					pageId: "zero-me.html",
					pageUrl: "zero-me.html"
				}
			];
			zeroStyle = {
				top: "44px",
				bottom: "50px"
			}

			mui.plusReady(function() {
				
				//禁止返回到登录注册页面
				mui.back =function(){
					return false;
				}
				
				//获取当前的webviwe对象
				var indexWebView = plus.webview.currentWebview()

				// 向当前的主页webview追加子页的4张webview对象
				for(var i = 0; i < zeroArray.length; i++) {
					var zeroPage = plus.webview.create(zeroArray[i].pageUrl,
						zeroArray[i].pageId, zeroStyle);
					// 隐藏webview窗口
					zeroPage.hide();
					// 追加每一个子页面到当前主页面
					indexWebView.append(zeroPage);
				}
				plus.webview.show(zeroArray[0].pageId)

				// 批量绑定tap事件，展示不同的页面
				mui(".mui-bar-tab").on("tap", "a", function() {
					var tabindex = this.getAttribute("tabindex");

					// 显示点击的tab选项所对应的页面
					plus.webview.show(zeroArray[tabindex].pageId, "fade-in", 200);

					// 隐藏其他的不需要的页面
					for(var i = 0; i < zeroArray.length; i++) {
						if(i != tabindex) {
							plus.webview.hide(zeroArray[i].pageId, "fade-out", 200);
						}
					}
				})

			});
		</script>

	</body>

</html>